<!-- 应用系统配置 -->
<template>
	<div class="container">
		<!-- 搜索条件 -->
		<yd-form ref="formRef" :options="formOptions" :model="formData">
			<template #form-btn>
				<el-form-item label="云平台" prop="cloudPlatformCode">
					<el-select v-model="formData.cloudPlatformCode" placeholder="请选择" style="width: 240px" :disabled="addDialogForm.inputReadOnly">
						<el-option v-for="(dict, index) in options.cloudPlatformOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标识属性">
					<custom-select ref="customSelectRef" :config="{ placeholder: '请设置标识属性', val: '其他筛选' }">
						<div>
							<el-table
								ref="effectAttrTable"
								size="small"
								height="270px"
								style="width: 1000px"
								:data="effectAttrTableData"
								@selection-change="selectionEffectAttr"
							>
								<el-table-column align="center" type="selection" min-width="5%"></el-table-column>
								<el-table-column align="left" prop="attrName" label="筛选条件" min-width="35%"></el-table-column>
								<el-table-column align="left" prop="" label="条件值" min-width="55%">
									<template #default="scope">
										<el-radio v-model="scope.row.val" :label="1">是</el-radio>
										<el-radio v-model="scope.row.val" :label="0">否</el-radio>
									</template>
								</el-table-column>
							</el-table>

							<div style="text-align: center; background-color: #30557c">
								<el-button size="small" @click="customSelectRef.hideCustom()">关闭</el-button>
							</div>
						</div>
					</custom-select>
				</el-form-item>
				<el-button style="margin-left: 10px" type="primary" icon="Search" @click="searchHandler">查 询</el-button>
				<div style="z-index: 1">
					<div class="effect-attr-selects" v-for="(option1, index) in currentEffectSelects" :key="index">
						<div v-if="option1.field != 'relevance' && option1.field != 'decode'">
							<div>
								<span style="float: left; line-height: 34px">{{ option1.attrName }}：</span>
								<span style="float: left">
									<el-radio v-model="option1.val" :label="1">是</el-radio>
									<el-radio v-model="option1.val" :label="0">否</el-radio>
								</span>
							</div>
						</div>
						<div v-else-if="option1.field == 'relevance'">
							<div style="float: left">{{ option1.attrName }}：</div>
							<div v-for="(option, index) in options.relevanceEffectOptions" :key="index" style="float: left">
								<el-radio v-model="option1.re" :label="option.value"> {{ option.label }} </el-radio>
							</div>
						</div>
						<div v-else-if="option1.field == 'decode'">
							<div style="float: left">{{ option1.attrName }}：</div>
							<div v-for="(option, index) in options.decodeEffectOptions" :key="index" style="float: left">
								<el-radio v-model="option1.dec" :label="option.value"> {{ option.label }} </el-radio>
							</div>
						</div>
					</div>
				</div>
			</template>
		</yd-form>

		<!--查询列表-->
		<YdTable
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			ref="multipleTable"
			@sizeChangeHandler="searchHandler"
			@currentChangeHandler="searchHandler"
			@sortChangeHandler="searchHandler"
			@selectionChangeHandler="handleSelectionChange"
		></YdTable>

		<!-- 添加或修改参数配置对话框 -->
		<el-dialog :title="title" v-model="addDialogForm.open" width="800px" append-to-body center @close="cancelHandle" :close-on-click-modal="false">
			<el-form ref="sysForm" :model="form" :rules="rules" label-width="140px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="应用系统名称:" prop="name">
							<el-input
								v-model="form.name"
								placeholder="请输入应用系统名称"
								style="width: 200px"
								:disabled="addDialogForm.inputReadOnly"
								maxlength="50"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="所属域:" prop="domainCode">
							<el-select
								v-model="form.domainCode"
								placeholder="请选择"
								@change="changeHandle"
								style="width: 200px"
								:disabled="addDialogForm.inputReadOnly"
							>
								<el-option
									v-for="(option, index) in options.systemDomainOptions"
									:key="index"
									:label="option.label"
									:value="option.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="系统类型:" prop="type">
							<el-select v-model="form.type" placeholder="请选择" @change="changeHandle" style="width: 200px" :disabled="addDialogForm.inputReadOnly">
								<el-option v-for="(option, index) in options.typeOptions" :key="index" :label="option.label" :value="option.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否存在区域编码:" prop="isRegion">
							<el-select
								v-model="form.isRegion"
								placeholder="请选择"
								@change="changeHandle"
								style="width: 200px"
								:disabled="addDialogForm.inputReadOnly"
							>
								<el-option v-for="(dict, index) in options.isOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否为关键系统:" prop="isKey">
							<el-select
								v-model="form.isKey"
								placeholder="请选择"
								@change="changeHandle"
								style="width: 200px"
								:disabled="addDialogForm.inputReadOnly"
							>
								<el-option v-for="(dict, index) in options.isOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否存在IP漂移:" prop="isDrift">
							<el-select
								v-model="form.isDrift"
								placeholder="请选择"
								@change="changeHandle"
								style="width: 200px"
								:disabled="addDialogForm.inputReadOnly"
							>
								<el-option v-for="(dict, index) in options.isOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="是否虚拟系统:" prop="isVirtual">
							<el-select
								v-model="form.isVirtual"
								placeholder="请选择"
								@change="changeHandle"
								style="width: 200px"
								:disabled="addDialogForm.inputReadOnly"
							>
								<el-option v-for="(dict, index) in options.isOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="云平台:" prop="cloudPlatformCode">
							<el-select v-model="form.cloudPlatformCode" placeholder="请选择" style="width: 200px" :disabled="addDialogForm.inputReadOnly">
								<el-option v-for="(dict, index) in options.cloudPlatformOptions" :key="index" :label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="显示顺序:" prop="sequence">
							<el-input-number
								controls-position="right"
								:precision="0"
								v-model.number="form.sequence"
								placeholder="请输入显示顺序"
								style="width: 200px"
								:min="0"
								:disabled="addDialogForm.inputReadOnly"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="应用系统备注:" prop="remarks">
							<el-input type="textarea" v-model="form.remarks" rows="5" :disabled="addDialogForm.inputReadOnly" maxlength="100"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer class="dialog-footer">
				<el-button type="primary" @click="submitForm" v-if="addDialogForm.showSubmit">确 定</el-button>
				<el-button @click="cancelHandle" v-if="addDialogForm.showSubmit">取 消</el-button>
				<el-button type="primary" @click="cancelHandle" v-if="addDialogForm.showClose">关 闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="tsx">
import {
	querySystemManagementList,
	addSystemManagemen,
	editSystemManagemen,
	querySystemManagemenById,
	deleteSystemManagemenByIds,
	startSystem,
	stopSystem,
	querySystemDomainOptions,
} from '@/api/management/systemManage/systemConfig';
import { queryDictByType } from '@/api/search/searchOptions';
import CustomSelect from '@/components/CustomSelect/index.vue';
import { getDicts } from '@/api/admin/dict/data';
import { onMounted, toRefs, ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const route = useRoute();
const router = useRouter();

const formRef = ref();
// 属性标识列表数据
let effectAttrTableData = reactive([
	{
		field: 'isRegion',
		attrName: '是否存在区域编码',
		val: 1,
		re: '0',
		dec: 'no',
	},
	{
		field: 'isKey',
		attrName: '是否关键系统',
		val: 1,
		re: '0',
		dec: 'no',
	},
	{
		field: 'isDrift',
		attrName: '是否IP漂移',
		val: 1,
		re: '0',
		dec: 'no',
	},
	{
		field: 'isVirtual',
		attrName: '是否虚拟系统',
		val: 1,
		re: '0',
		dec: 'no',
	},
]);
const currentEffectSelects = ref<any>([]);
// 选中数组
const ids = ref<any>([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 弹出层标题
const title = ref('');
// 表单参数
const data = reactive<anyObj>({
	form: {},
});
const { form } = toRefs(data);
let addDialogForm = reactive({
	// 是否显示弹出层
	open: false,
	//是否显示确认提交按钮，查看详情的时候不需要确认按钮
	showSubmit: true,
	showClose: false,
	inputReadOnly: false,
});
//下拉框选项
let options = reactive<any>({
	isOptions: [
		{ label: '否', value: 0 },
		{ label: '是', value: 1 },
	],
	systemDomainOptions: [],
	systemDomainOptions1: [],
	typeOptions: [], //系统类型弹出框
	typeOptions1: [], //系统类型，搜索框
	cloudPlatformOptions: [],
});
// 网端表单校验
const rules = ref({
	name: [{ required: true, message: '应用系统名称不能为空', trigger: 'blur' }],
	showOrder: [
		{
			required: true,
			message: '显示顺序不能为空',
			trigger: ['change', 'blur'],
		},
	],
	// remarks: [{ required: true, message: '应用系统备注不能为空', trigger: 'blur' }],
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '监控状态',
		prop: 'status',
		isInitValue: false,
		children: [
			{ value: 0, label: '初始化' },
			{ value: 1, label: '监控中' },
			{ value: 2, label: '停止监控' },
		],
		selectKey: 'value',
	},
	{
		type: 'input',
		label: '应用系统名称',
		prop: 'name',
		attrs: {
			clearable: true,
		},
	},
	// {
	// 	type: 'input',
	// 	label: '应用系统编码',
	// 	prop: 'resourceCoding',
	// 	attrs: {
	// 		clearable: true,
	// 	},
	// },
	{
		type: 'select',
		label: '所属域',
		prop: 'domainCode',
		// api: {
		// 	name: 'querySystemDomainOptions',
		// },
		isInitValue: false,
		children: options.systemDomainOptions1,
	},
	{
		type: 'select',
		label: '系统类型',
		prop: 'type',
		children: options.typeOptions1,
		selectKey: 'id',
		isInitValue: false,
	},
]);
// 搜索表单数据
let formData = reactive<anyObj>({
	...route.params,
	orderByColumn: '',
	isAsc: '',
	type: '',
});
// 列表配置
let tableConfig = reactive({
	url: querySystemManagementList,
	columns: [
		{
			label: '应用系统名称',
			prop: 'name',
			operation: [
				{
					text: undefined,
					rowKey: 'name',
					handler: (scope: anyObj) => jumpToBusinessHandle(scope.row),
				},
			],
		},
		// {
		// 	label: '应用系统编码',
		// 	prop: 'resourceCoding',
		// },
		{
			label: '所属域',
			prop: 'domainName',
		},
		{
			label: '系统类型',
			prop: 'type',
			formatter(row: any, val: any) {
				let str;
				if (val === 1) {
					str = '营业厅';
				} else if (val === 2) {
					str = '网厅';
				} else {
					str = '第三方接口';
				}
				return str;
			},
		},
		{
			label: '存在区域编码',
			prop: 'isRegion',
			formatter(row: any, val: any) {
				let str;
				if (val === 1) {
					str = '是';
				} else {
					str = '否';
				}
				return str;
			},
		},
		{
			label: '状态',
			prop: 'status',
			width: 120,
			renderXss: (row: anyObj, val: ApiVal) => {
				if (val == 2) {
					return (
						<div>
							<div style=" background: red;" class="dot"></div>
							<div style="float:left">停止监控</div>
						</div>
					);
				} else if (val == 1) {
					return (
						<div>
							<div style=" background: green;" class="dot"></div>
							<div style="float:left">监控中</div>
						</div>
					);
				} else {
					return (
						<div>
							<div style=" background: orange;" class="dot"></div>
							<div style="float:left">初始化</div>
						</div>
					);
				}
			},
		},
		{
			label: '关键系统',
			prop: 'isKey',
			formatter(row: any, val: any) {
				let str;
				if (val === 1) {
					str = '是';
				} else {
					str = '否';
				}
				return str;
			},
		},
		{
			label: '存在IP漂移',
			prop: 'isDrift',
			formatter(row: any, val: any) {
				let str;
				if (val === 1) {
					str = '是';
				} else {
					str = '否';
				}
				return str;
			},
		},
		{
			label: '虚拟系统',
			prop: 'isVirtual',
			formatter(row: any, val: any) {
				let str;
				if (val === 1) {
					str = '是';
				} else {
					str = '否';
				}
				return str;
			},
		},
		{
			label: '显示顺序',
			prop: 'sequence',
			width: 120,
			sortable: true,
		},
		{
			label: '云平台',
			prop: 'cloudPlatformName',
		},
		{
			label: '创建人',
			prop: 'createBy',
			width: 90,
		},
		{
			label: '创建时间',
			prop: 'createTime',
			width: 170,
			sortable: true,
		},
		{
			label: '操作',
			prop: '',
			width: 200,
			operation: [
				{
					text: '详情',
					handler: (scope: anyObj) => getDetailHandle(scope.row),
				},
				{
					text: 'IT路径图配置',
					handler: (scope: anyObj) => jumpItroadHandle(scope.row),
					permi: ['system:itRoad:list'],
				},
			],
		},
	],
	// 工具栏
	toolBar: [
		{
			name: '新增',
			icon: 'yd-icon-plus',
			permi: ['system:add'],
			handler: () => addHandle(),
		},
		{
			name: '修改',
			icon: 'yd-icon-edit',
			permi: ['system:edit'],
			disable: 'single',
			handler: () => updateHandle(),
		},
		{
			name: '删除',
			icon: 'yd-icon-delete',
			permi: ['system:delete'],
			disable: 'multiple',
			handler: () => deleteHandle(),
		},
		{
			name: '启用',
			icon: 'yd-icon-start',
			permi: ['system:startOrstop'],
			disable: 'multiple',
			handler: () => statusHandle(1),
		},
		{
			name: '停止',
			icon: 'yd-icon-stop',
			permi: ['system:startOrstop'],
			disable: 'multiple',
			handler: () => statusHandle(2),
		},
	],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = ref([]);
const customSelectRef = ref<any>();
const multipleTable = ref<any>();
const sysForm = ref<any>();
// 标识属性对象
const effectObj = ref();

onMounted(() => {
	getConfigData();
	searchHandler();
});

function getConfigData() {
	querySystemDomainOptions().then((res: ApiResponse) => {
		// options.systemDomainOptions = res.data;
		res.data.forEach((r: anyObj) => {
			options.systemDomainOptions.push({
				label: r.label,
				value: r.value,
			});
			options.systemDomainOptions1.push({
				label: r.label,
				value: r.value,
			});
		});
		formRef.value.cloneOptions();
		console.log('options.systemDomainOptions',options.systemDomainOptions)
	});
	getDicts('system_type').then((res: ApiResponse) => {
		res.data.forEach((r: anyObj) => {
			options.typeOptions.push({
				label: r.label,
				id: parseInt(r.value),
			});
			options.typeOptions1.push({
				label: r.label,
				id: parseInt(r.value),
			});

		});
		formRef.value.cloneOptions();
	});
	// 云平台
	queryDictByType('cloud_platform').then((res: ApiResponse) => {
		if (res.code === 0 && res.data instanceof Array) {
			options.cloudPlatformOptions = res.data;
		}
	});
}

function selectionEffectAttr(selects: any) {
	currentEffectSelects.value = selects;
}
function queryFilter() {
	// 关闭标识属性下拉框
	customSelectRef.value.hideCustom();
	// 设置查询值
	// formData.isSensitiveInformation = undefined;
	// formData.isSaveOri = undefined;
	// formData.isCheckAll = undefined;
	const effectList = JSON.parse(JSON.stringify(currentEffectSelects.value));
	// 先清空
	effectObj.value = {};
	effectList.forEach((effect: anyObj) => {
		effectObj.value[effect.field] = effect.val;
	});
	return true;
}
// 搜索
function searchHandler() {
	queryFilter();
	tableConfig.loading = true;
	querySystemManagementList({ ...formData, ...effectObj.value }).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgError(res.msg);
			tableConfig.loading = false;
			return;
		}
		tableConfig.loading = false;
		tableData.value = res.data.records;
		tableConfig.pagination.total = res.data.total;
	});
}
// 多选框选中数据
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: anyObj) => item.id);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
}
/** 新增按钮操作 */
function addHandle() {
	reset();
	title.value = '增加应用系统';
	addDialogForm.open = true;
	//初始化
	form.value.isRegion = 0;
	form.value.isKey = 1;
	form.value.isDrift = 0;
	form.value.isVirtual = 0;
	form.value.type = 1;
	// 新增时默认展示未知域
	form.value.domainCode = 'unknown';
	//控制是否可以有提交按钮，详情不能有提交按钮
	addDialogForm.showSubmit = true;
	addDialogForm.showClose = false;
	addDialogForm.inputReadOnly = false;
}
/** 修改按钮操作 */
function updateHandle() {
	reset();
	title.value = '修改应用系统';
	addDialogForm.open = true;
	//控制是否可以有提交按钮，详情不能有提交按钮
	addDialogForm.showSubmit = true;
	addDialogForm.showClose = false;
	addDialogForm.inputReadOnly = false;
	const id = ids.value;
	querySystemManagemenById(id).then((response) => {
		const data = response.data;
		form.value = data;
	});
}
/** 删除按钮操作 */
function deleteHandle() {
	if (ids.value == null) {
		proxy.$modal.msgWarning('请选择要删除的应用系统信息');
		return;
	}
	proxy.$modal
		.confirm('是否需要删除已经勾选的应用系统信息?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			cancelButtonClass: 'confirm-rigth-cancel-button',
			type: 'warning',
		})
		.then(() => {
			deleteSystemManagemenByIds(ids.value).then((response) => {
				if (response.code === 0) {
					addDialogForm.open = false;
					// 删除后的总条数
					let totalCount = tableConfig.pagination.total - ids.value.length;
					// 计算删除后的总页数
					let totalPage = Math.ceil(totalCount / tableConfig.pagination.pageSize);
					// 如果删除后的总页数小于1, 置为1
					totalPage = totalPage < 1 ? 1 : totalPage;
					// 判断删除前的页数是否大于删除后的总页数, 计算当前页应该是多少赋值给查询表单
					tableConfig.pagination.pageNum = tableConfig.pagination.pageNum > totalPage ? totalPage : tableConfig.pagination.pageNum;
					proxy.$modal.msgSuccess('删除成功');
					searchHandler();
				} else {
					proxy.$modal.msgWarning(response.msg);
					return;
				}
			});
		})
		.catch(function () {
			addDialogForm.open = false;
			proxy.$modal.msgWarning('删除失败');
			searchHandler();
		});
}
/** 提交按钮 */
function submitForm() {
	sysForm.value.validate((valid: any) => {
		if (valid) {
			if (form.value.id != undefined) {
				editSystemManagemen(form.value).then((response) => {
					if (response.code === 0) {
						addDialogForm.open = false;
						proxy.$modal.msgSuccess('修改成功');
						formData.domainCode = '';
						formData.orderByColumn = '';
						formData.type = '';
						searchHandler();
					} else {
						proxy.$modal.msgWarning(response.msg);
						return;
					}
				});
			} else {
				form.value.isStatus = 0;
				addSystemManagemen(form.value).then((response) => {
					if (response.code === 0) {
						addDialogForm.open = false;
						proxy.$modal.msgSuccess('新增成功');
						formData.domainCode = '';
						formData.orderByColumn = '';
						formData.type = '';
						searchHandler();
					} else {
						proxy.$modal.msgWarning(response.msg);
						return;
					}
				});
			}
		}
	});
}
function cancelHandle() {
	addDialogForm.open = false;
	setTimeout(() => {
		reset();
	}, 600);
}
// 表单重置
function reset() {
	form.value = {
		name: undefined,
	};
	sysForm.value?.resetFields();
}
// 查看详情
function getDetailHandle(row: anyObj) {
	title.value = '应用系统详情';
	addDialogForm.open = true;
	//控制是否可以有提交按钮，详情不能有提交按钮
	addDialogForm.showSubmit = false;
	addDialogForm.showClose = true;
	addDialogForm.inputReadOnly = true;
	querySystemManagemenById(row.id).then((response) => {
		const data = response.data;
		form.value = data;
	});
}
// 下拉框改变
function changeHandle() {
	// (formData.domainCode = form.value.domainCode), (formData.type = form.value.type);
}
// 批量启用或停止系统
function statusHandle(status: number) {
	let text = '启用';
	let startOrStopApi = startSystem;
	if (status == 2) {
		text = '停止';
		startOrStopApi = stopSystem;
	}
	if (ids.value == null || ids.value == '') {
		proxy.$modal.msgWarning('请选择' + text + '的应用系统信息。');
		return;
	}
	proxy.$modal
		.confirm('是否' + text + '已选中的应用系统信息?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			cancelButtonClass: 'confirm-rigth-cancel-button',
			type: 'warning',
		})
		.then(() => {
			startOrStopApi(ids.value).then((response: ApiResponse) => {
				if (response.code === 0) {
					addDialogForm.open = false;
					proxy.$modal.msgSuccess(text + '成功');
					searchHandler();
					multipleTable.value.clearSelection();
					ids.value = [];
				} else {
					proxy.$modal.msgWarning(response.msg);
					return;
				}
			});
		})
		.catch(function () {
			addDialogForm.open = false;
			proxy.$modal.msgWarning(text + '失败');
			searchHandler();
		});
}
// 跳转到业务配置
function jumpToBusinessHandle(row: anyObj) {
	// debugger;
	router.push({
		path: '/management/businessManage/businessConfig',
		query: {
			systemId: row.id,
		},
	});
}
// 跳转到it路径图
function jumpItroadHandle(row: anyObj) {
	router.push({
		path: '/management/segmentManage/itRoad/index',
		query: {
			systemId: row.id,
		},
	});
}
</script>

<style scoped>
.container {
	margin: 10px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 100%;
	float: left;
	margin-top: 8px;
	margin-right: 5px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.effect-attr-selects {
	display: inline-block;
	margin: 2px 10px;
	padding: 0 5px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}
:deep(.el-table__body-wrapper) {
	background-color: #30557c;
}
</style>
